import React, {Component} from 'react'

export default class ForwardRefDemo extends Component {
    constructor(){
        super()
        this.ref = React.createRef()
    }
    render() {
        return <div>
            this is Forward Ref demo<br/>
            <TargetComponent ref={this.ref}/>
        </div>
    }
    componentDidMount(){
        this.ref.current.value='I got it'
        this.ref.current.style.height = '30px'
        this.ref.current.style.width = '300px'
        this.ref.current.style.borderRadius = '5px'
        this.ref.current.style.border = 'none'
        this.ref.current.style.padding = '6px'
    }
}

const TargetComponent = React.forwardRef((props, ref) => (
    <input type="text" ref={ref}/>
))
